import ReactEcharts from 'echarts-for-react';
import { Component } from 'react';
import { StatisticCard } from '@ant-design/pro-card';
import { Space } from 'antd';
import { EllipsisOutlined, RightOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';

const { Statistic, Divider } = StatisticCard;

export class index extends Component {
  onClickChart = (e: any) => {
    console.log('打印', e);
  };
  render() {
    const option = {
      title: {
        text: '设置标题',
        left: 'center',
        align: 'right',
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 套接口数据 data: this.state.week
        // data: this.state.week
      },
      yAxis: {
        type: 'value',
      },
      dataZoom: [
        {
          show: true,
          type: 'slider',
          start: 70,
          end: 100,
          bottom: '-2%',
        },
      ], // dataZoom 设置滚动条
      color: ['#4ecb73', '#28a6ff', '#cccccc', '#FF3333'], // color 设置颜色
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130], // 套接口数据 data: this.state.date
          // data: this.state.date,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)',
          },
        },
      ],
    };

    const onEvents = {
      click: this.onClickChart,
    };
    return (
      <PageContainer>
        <StatisticCard
          title={
            <Space>
              <span>部门一</span>
              <RightOutlined style={{ color: 'rgba(0,0,0,0.65)' }} />
            </Space>
          }
          extra={<EllipsisOutlined />}
          statistic={{
            value: 1102893,
            prefix: '¥',
            description: (
              <Space>
                <Statistic title="实际完成度" value="82.3%" />
                <Statistic title="当前目标" value="¥6000" />
              </Space>
            ),
          }}
          chart={
            <div>
              <ReactEcharts
                option={option}
                onEvents={onEvents}
                style={{ height: '220px', width: '88%', margin: '0 auto', paddingBottom: '100' }}
              />
            </div>
          }
          style={{ width: 268 }}
        />
      </PageContainer>
    );
  }
}

export default index;
